<!DOCTYPE html>
<html lang="">
<head>
  <meta name="generator" content="Hexo 3.9.0">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  <link rel="icon" href="https://wscats.github.io/omi-docs/public/favicon.ico">
  <title>
    Omil
  </title>
  <!-- Spectre.css framework (v0.5.8) -->
  <link rel="stylesheet" href="./styles/spectre.min.css">
  <link rel="stylesheet" href="./styles/spectre-exp.min.css">
  <link rel="stylesheet" href="./styles/spectre-icons.min.css">

  <!-- Noto Sans TC -->
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans+TC" rel="stylesheet">

  <!-- theme css & js -->
  <link rel="stylesheet" href="./styles/spectre_custom.css">
  <link rel="stylesheet" href="./styles/book.css">
  <script src="./scripts/book.js"></script>

  <!-- tocbot -->
  <script src="./scripts/tocbot.min.js"></script>
  <link rel="stylesheet" href="./styles/tocbot.css">

  <!-- highlight.js -->
  <link rel="stylesheet" href="./styles/default.min.css">
  <script src="./scripts/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>

  <!-- katex -->
  <link rel="stylesheet" href="./styles/katex.min.css">
</head>

<body style="background-color: transparent; color: white;">
  <style>
    .book-sidebar a {
      color: white;
    }

    .code {
      color: white;
    }
  </style>
  <div class="container">
    <div class="book-container">
      <div class="columns">
        <div class="column col-2 hide-lg">
          <div class="book-sidebar">
            <h4 class="site-meta">
              <a style="color: white;" href="https://wscats.github.io/omi-docs/public/home">目录</a>
            </h4>
            <div class="sidebar-content">
              <!--  * [介绍](/)
                    * [安装](/install)
                    * [配合Omi Snippets插件](/plugin)
                    * [配合React开发](/react)
                    * [语言块规范](/spec)
                    * [JSX](/jsx)
                    * [Props](/props)
                    * [事件处理](/event)
                    * [生命周期](/lifecycle)
                    * [Update](/update)
                    * [Ref](/ref)
                    * [Store](/store)
                    * [CSS](/css)
                    * [高阶组件](/hoc) -->
              <ul>
                <li><a href="https://wscats.github.io/omi-docs/public/home">介绍</a></li>
                <li><a href="https://wscats.github.io/omi-docs/public/install/">安装</a></li>
                <li><a href="https://wscats.github.io/omi-docs/public/plugin">配合Omi Snippets插件</a></li>
                <li><a href="https://wscats.github.io/omi-docs/public/react">配合React开发</a></li>
                <li><a href="https://wscats.github.io/omi-docs/public/spec">语言块规范</a></li>
                <li><a href="https://wscats.github.io/omi-docs/public/jsx">JSX</a></li>
                <li><a href="https://wscats.github.io/omi-docs/public/props">Props</a></li>
                <li><a href="https://wscats.github.io/omi-docs/public/event">事件处理</a></li>
                <li><a href="https://wscats.github.io/omi-docs/public/lifecycle">生命周期</a></li>
                <li><a href="https://wscats.github.io/omi-docs/public/update">Update</a></li>
                <li><a href="https://wscats.github.io/omi-docs/public/ref">Ref</a></li>
                <li><a href="https://wscats.github.io/omi-docs/public/store">Store</a></li>
                <li><a href="https://wscats.github.io/omi-docs/public/css">CSS</a></li>
                <li><a href="https://wscats.github.io/omi-docs/public/hoc">高阶组件</a></li>
              </ul>

            </div>
          </div>

          <script src="https://wscats.github.io/omi-docs/public/js/book-sidebar.js"></script>
        </div>

        <div class="column col-8 col-lg-12">
          <div class="book-content">
            <div class="book-navbar">
              <header class="navbar">
                <section class="navbar-section">
                  <img class="navbar-icon" src="https://wscats.github.io/omi-docs/public/favicon.ico">
                </section>
                <section class="navbar-center">
                  Omil
                </section>
                <section class="navbar-section">
                  <label class="accordion-header c-hand" for="accordion-sidebar">
                    <i class="icon icon-menu"></i>
                  </label>
                </section>
              </header>

              <div class="accordion">
                <input type="checkbox" id="accordion-sidebar" name="accordion-checkbox" hidden>
                <div class="accordion-body">
                  <!--  * [介绍](/)
                        * [安装](/install)
                        * [配合Omi Snippets插件](/plugin)
                        * [配合React开发](/react)
                        * [语言块规范](/spec)
                        * [JSX](/jsx)
                        * [Props](/props)
                        * [事件处理](/event)
                        * [生命周期](/lifecycle)
                        * [Update](/update)
                        * [Ref](/ref)
                        * [Store](/store)
                        * [CSS](/css)
                        * [高阶组件](/hoc) -->
                  <ul>
                    <li><a href="https://wscats.github.io/omi-docs/public/home">介绍</a></li>
                    <li><a href="https://wscats.github.io/omi-docs/public/install/">安装</a></li>
                    <li><a href="https://wscats.github.io/omi-docs/public/plugin">配合Omi Snippets插件</a></li>
                    <li><a href="https://wscats.github.io/omi-docs/public/react">配合React开发</a></li>
                    <li><a href="https://wscats.github.io/omi-docs/public/spec">语言块规范</a></li>
                    <li><a href="https://wscats.github.io/omi-docs/public/jsx">JSX</a></li>
                    <li><a href="https://wscats.github.io/omi-docs/public/props">Props</a></li>
                    <li><a href="https://wscats.github.io/omi-docs/public/event">事件处理</a></li>
                    <li><a href="https://wscats.github.io/omi-docs/public/lifecycle">生命周期</a></li>
                    <li><a href="https://wscats.github.io/omi-docs/public/update">Update</a></li>
                    <li><a href="https://wscats.github.io/omi-docs/public/ref">Ref</a></li>
                    <li><a href="https://wscats.github.io/omi-docs/public/store">Store</a></li>
                    <li><a href="https://wscats.github.io/omi-docs/public/css">CSS</a></li>
                    <li><a href="https://wscats.github.io/omi-docs/public/hoc">高阶组件</a></li>
                  </ul>

                </div>
              </div>
            </div>

            <div class="book-post">
              <h1 id="Omil-是什么？"><a href="#Omil-是什么？" class="headerlink" title="Omil 是什么？"></a>Omil 是什么？</h1>
              <p><code>omil</code>是一个 webpack 的 loader，它允许你以一种名为单文件组件<code>(SFCs)</code>的格式撰写 Omi 组件：</p>
              <figure class="highlight html">
                <table>
                  <tr>
                    <td class="gutter">
                      <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre>
                    </td>
                    <td class="code">
                      <pre><span class="line"><span class="tag">&lt;<span class="name">template</span> <span class="attr">lang</span>=<span class="string">"html"</span> <span class="attr">name</span>=<span class="string">"component-name"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">header</span> <span class="attr">onClick</span>=<span class="string">"$&#123;this.test&#125;"</span>&gt;</span>$&#123;this.data.title&#125;<span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line">export default class &#123;</span><br><span class="line">  test()&#123; console.log('Hello Eno!') &#125;</span><br><span class="line">  install() &#123;</span><br><span class="line">    this.data = &#123; title: 'Omi' &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line">header &#123; color: #58bc58; &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre>
                    </td>
                  </tr>
                </table>
              </figure>

              <p>Omil 还提供了很多酷炫的特性：</p>
              <ul>
                <li>允许为 Omi 组件的每个部分使用其它的 webpack loader，例如在<code>&lt;style&gt;</code>的部分使用 Sass
                  和在<code>&lt;template&gt;</code>的部分使用 jsx；</li>
                <li>允许在一个 .omi 文件中使用自定义块，并对其运用自定义的 loader 链；</li>
                <li>使用 webpack loader 将<code>&lt;style&gt;</code>和<code>&lt;template&gt;</code>中引用的资源当作模块依赖来处理；</li>
                <li>在开发过程中使用热重载来保持状态。</li>
              </ul>
              <p>简而言之，webpack 和 Omi Loader 的结合为你提供了一个现代、灵活且极其强大的前端工作流，来帮助撰写 Omi.js 应用。</p>

            </div>


            <div class="book-comments">



            </div>


            <script src="https://wscats.github.io/omi-docs/public/js/book-post.js"></script>
          </div>
        </div>

        <div class="column col-2 hide-lg">
          <div class="book-toc">
            <div class="book-tocbot">
            </div>
            <div class="book-tocbot-menu">
              <a class="book-toc-expand" onclick="expand_toc()">Expand all</a>
              <a onclick="go_top()">Back to top</a>
              <a onclick="go_bottom()">Go to bottom</a>
            </div>
          </div>

          <script>
            tocbot.init({
              tocSelector: '.book-tocbot',
              contentSelector: '.book-post',
              headingSelector: 'h1, h2, h3, h4, h5',
              collapseDepth: 2,
              orderedList: false,
              scrollSmooth: false,
            });

            function expand_toc() {
              var b = document.querySelector(".book-toc-expand");
              tocbot.init({
                tocSelector: '.book-tocbot',
                contentSelector: '.book-post',
                headingSelector: 'h1, h2, h3, h4, h5',
                collapseDepth: 6,
                orderedList: false,
                scrollSmooth: false,
              });
              b.setAttribute("onclick", "collapse_toc()");
              b.innerHTML = "Collapse all"
            }

            function collapse_toc() {
              var b = document.querySelector(".book-toc-expand");
              tocbot.init({
                tocSelector: '.book-tocbot',
                contentSelector: '.book-post',
                headingSelector: 'h1, h2, h3, h4, h5',
                collapseDepth: 2,
                orderedList: false,
                scrollSmooth: false,
              });
              b.setAttribute("onclick", "expand_toc()");
              b.innerHTML = "Expand all"
            }

            function go_top() {
              window.scrollTo(0, 0);
            }

            function go_bottom() {
              window.scrollTo(0, document.body.scrollHeight);
            }

          </script>
        </div>
      </div>
    </div>
  </div>

</body>

</html>